<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm dict-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="资源名称" prop="resName">
              <el-input v-model="formData.resName" placeholder="请输入资源名称" size="medium" />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="资源权限" prop="permissionCode">
              <el-input v-model="formData.permissionCode" placeholder="请输入资源权限" size="medium" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="资源路径" prop="resPath">
              <el-input v-model="formData.resPath" placeholder="请输入资源路径" size="medium" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="资源全路径" prop="resFullPath">
              <el-input v-model="formData.resFullPath" readonly placeholder="请输入资源全路径" size="medium" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="上级资源" prop="parentId">
              <el-select v-model="formData.parentId" placeholder="请选择上级资源" filterable size="medium">
                <el-option
                  v-for="item in resource"
                  :key="item.id"
                  :label="item.resName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="资源类型" prop="fdType">
              <el-select v-model="formData.fdType" placeholder="请选择资源类型" filterable size="medium">
                <el-option
                  v-for="item in resourceType"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="是否登录可见" prop="fdLoginVisible">
              <el-select v-model="formData.fdLoginVisible" placeholder="请选择" filterable size="medium">
                <el-option
                  v-for="item in fdLoginVisibleList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="formData.sort" :min="1" :max="1000" label="排序" size="medium"></el-input-number>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 30px;">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" size="medium" type="textarea" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-form-item style="text-align: center;">
          <el-button size="medium" type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button size="medium" @click="$router.back(-1)">返回</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getAllResource, save, getDataById } from '@/api/sys/auth/resource/index'

export default {
  data() {
    return {
      formData: {
        id: '',
        resName: '',
        permissionCode: '',
        resPath: '',
        resFullPath: '',
        fdType: '',
        sort: '',
        parentId: '',
        remark: '',
        fdLoginVisible: false
      },
      rules: {
        resName: [
          { required: true, message: '请输入资源名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        permissionCode: [
          { required: true, message: '请输入资源权限', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        resPath: [
          { required: true, message: '请输入资源路径', trigger: 'blur' },
          { min: 3, max: 150, message: '长度在 3 到 150 个字符', trigger: 'blur' }
        ],
        resFullPath: [
          { required: false, message: '请输入资源路径', trigger: 'blur' },
          { min: 3, max: 150, message: '长度在 3 到 200 个字符', trigger: 'blur' }
        ],
        fdType: [
          { required: true, message: '请选择资源类型', trigger: 'blur' }
        ],
        sort: [
          { required: false, message: '请输入资源排序', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择上级资源', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请填输入资源备注', trigger: 'blur' }
        ]
      },
      permissions: [],
      resource: [],
      resourceType: [
        { key: 0, name: '目录' },
        { key: 1, name: '菜单' },
        { key: 2, name: '按钮' }
      ],
      fdLoginVisibleList: [
        { key: false, name: '否' },
        { key: true, name: '是' }
      ]
    }
  },
  created() {
    this.getAllResource()
    this.getDataById()
    if (this.$route.query.parentId !== null) {
      this.formData.parentId = this.$route.query.parentId
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.formData).then(() => {
            this.loading = false
            this.$router.push({ name: 'resource_mgr_list' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getAllResource() {
      getAllResource().then(res => {
        this.resource.push({
          id: 0,
          resName: '顶级资源'
        })
        if (res.data) {
          this.resource = this.resource.concat(res.data)
        }
      })
    },
    getDataById() {
      getDataById(this.$route.query.id).then(res => {
        if (res.data) {
          this.formData = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
  .dict-form{
    padding-top: 30px;
    padding-right: 30px;
  }
</style>
